<template>
  <d2-container>
    <div class="content">
      <div class="header">
        <h3>开发信息</h3>
        <div class="header-info">商户号:XXXXX</div>
        <div class="header-info">appID:XXXXX</div>
        <div class="header-info">appID:XXXXX</div>
        <div class="header-info">appSecret:XXXXX</div>
        <div class="header-info">
          <el-button type="primary">查看AppSecret
          </el-button>
          <el-button type="danger">重置AppSecret
          </el-button>
        </div>
      </div>
      <div class="main">
        <el-row :gutter="24">
          <el-col :span="24">
            <div class="main-header">
              <h3>商户资料（审核通过）</h3>
              <h5>（需修改资料）原因：请重新XXXXX--平台驳回的备注原因</h5>
              <el-button type="danger" style="margin-left:30px;" v-if="isEdit" @click="isEdit =false">申请修改 </el-button>
            </div>
          </el-col>
          <el-form ref="elForm" class="elForm" :model="formData" :rules="rules" size="medium" :disabled="isEdit" label-width="200px">

            <el-col :span="16">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="formData.email" placeholder="请输入邮箱" clearable :style="{ width: '100%' }"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="16">
              <el-form-item label="手机号码" prop="field110">
                <el-select v-model="formData.field122" placeholder="号段" :style="{ width: '30%' }">
                  <el-option v-for="(item, index) in field122Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
                <el-input v-model="formData.field110" placeholder="请输入手机号码" clearable :style="{ width: '70%' }">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="公司名称" prop="field111">
                <el-input v-model="formData.field111" placeholder="请输入公司名称" clearable :style="{ width: '100%' }">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="注册证书编号" prop="field112">
                <el-input v-model="formData.field112" placeholder="请输入注册证书编号" clearable :style="{ width: '100%' }">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="公司开户行名称" prop="field113">
                <el-input v-model="formData.field113" placeholder="请输入公司开户行名称" clearable :style="{ width: '100%' }">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="开户行账户" prop="field114">
                <el-input v-model="formData.field114" placeholder="请输入开户行账户" clearable :style="{ width: '100%' }">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="开户行" prop="field115">
                <el-input v-model="formData.field115" placeholder="请输入开户行" clearable :style="{ width: '100%' }">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="开户行行号" prop="field116">
                <el-input v-model="formData.field116" placeholder="请输入开户行行号" clearable :style="{ width: '100%' }">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="公司注册地址" prop="field117">
                <el-input v-model="formData.field117" placeholder="请选择公司注册地址" clearable :style="{ width: '100%' }">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="法人/股东/董事名称" prop="field118">
                <el-input v-model="formData.field118" placeholder="请输入法人/股东/董事名称" clearable :style="{ width: '100%' }"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="座机号码" prop="field119">
                <el-input v-model="formData.field119" placeholder="请输入座机号码" clearable :style="{ width: '100%' }">
                </el-input>
              </el-form-item>
            </el-col>

            <template v-if="!isEdit">
              <el-col :span="24">
                <el-form-item label="" prop="">
                  <div class="" style="color:red;">
                    以下所需上传文件请上传JPG/PDF格式，且大小小于10M
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="公司注册证书" prop="verofycode" required>
                  <el-upload ref="verofycode" :file-list="verofycodefileList" :action="verofycodeAction" multiple :before-upload="verofycodeBeforeUpload" list-type="picture">
                    <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">
                      CR(注册证书)和最新版BR证书(商业等级证)，完整清晰的扫描PDF
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="公司章程及组织大纲" prop="field130" required>
                  <el-upload ref="field130" :file-list="field130fileList" :action="field130Action" multiple :before-upload="field130BeforeUpload" list-type="picture">
                    <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="注册代理人护照" prop="field131" required>
                  <el-upload ref="field131" :file-list="field131fileList" :action="field131Action" multiple :before-upload="field131BeforeUpload" list-type="picture">
                    <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="董事登记册或股东登记册" prop="field132" required>
                  <el-upload ref="field132" :file-list="field132fileList" :action="field132Action" multiple :before-upload="field132BeforeUpload" list-type="picture">
                    <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="BR商业登记证" prop="field133" required>
                  <el-upload ref="field133" :file-list="field133fileList" :action="field133Action" multiple :before-upload="field133BeforeUpload" list-type="picture">
                    <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="法团成立表（NNC）" prop="field134" required>
                  <el-upload ref="field134" :file-list="field134fileList" :action="field134Action" multiple :before-upload="field134BeforeUpload" list-type="picture">
                    <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">
                      法团成立表（NNC）需要是完整文件。多页请扫描在一个PDF文件里，不要分页提供
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="公司注册地址的地址说明" prop="field135" required>
                  <el-upload ref="field135" :file-list="field135fileList" :action="field135Action" multiple :before-upload="field135BeforeUpload" list-type="picture">
                    <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">
                      公司注册地址的地址说明，可提供近三个月含注册地址的银行账单，银行开户说明，水电煤气等公共费用账单，办公室租赁合同；完整清晰的扫描PDF;
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="银行开户证明/离岸证明" prop="field136" required>
                  <el-upload ref="field136" :file-list="field136fileList" :action="field136Action" multiple :before-upload="field136BeforeUpload" list-type="picture">
                    <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">
                      银行开户证明/离岸证明 完整清晰的扫描PDF
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="法人（董事）证件" prop="field137" required>
                  <el-upload ref="field137" :file-list="field137fileList" :action="field137Action" multiple :before-upload="field137BeforeUpload" list-type="picture">
                    <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">
                      法人（董事）身份证/护照/香港永久性居民身份证-正反面材料
                      尽量提供彩色扫描件；
                      董事信息来源于法团成立表director；如存在多位director，至少应该提供一位director材料
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="流水证明" prop="field138" required>
                  <el-upload ref="field138" :file-list="field138fileList" :action="field138Action" multiple :before-upload="field138BeforeUpload" list-type="picture">
                    <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">
                      3-6个月的历史交易数据，拒付率、欺诈率数据
                      需要提供历史支付后台的汇总统计pdf/清晰
                      后台截图形式文件（英文版），比如月度账单报表，可以看到交易、拒付争议、欺诈的汇总金额/笔数数据
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="办公场所照片或视频" prop="field139" required>
                  <el-upload ref="field139" :file-list="field139fileList" :action="field139Action" multiple :before-upload="field139BeforeUpload" list-type="picture">
                    <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">
                      办公场所照片或视频（包含公司前台LOGO和办公区域）
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="周年申报表（NAR1）" prop="field140">
                  <el-upload ref="field140" :file-list="field140fileList" :action="field140Action" multiple :before-upload="field140BeforeUpload" list-type="picture">
                    <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">
                      周年申报表（NAR1）
                      需要是完整文件。多页请扫描在一个PDF文件里，不要分页提供 ;
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="25%以上的股东证件信息" prop="field141">
                  <el-upload ref="field141" :file-list="field141fileList" :action="field141Action" multiple :before-upload="field141BeforeUpload" list-type="picture">
                    <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">
                      25%以上的股东证件信息
                      如股东为个人，需提供护照/身份证扫描件（如果是大陆地区优先提供身份证材料）；
                      如股东为公司，需提供控股公司的注册证书扫描件。
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="25%以上的股东地址证明" prop="field142">
                  <el-upload ref="field142" :file-list="field142fileList" :action="field142Action" multiple :before-upload="field142BeforeUpload" list-type="picture">
                    <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">
                      25%以上的股东地址证明
                      如果股东是个人，可提供近三个月内含居住地址的银行账单、水电煤账单、电话账单、
                      或者在政府开具的税单；如果是公司，可提供近三个月内含注册地址的银行账单、水电煤等公共费用账单或银行开户证明、
                      办公室租赁合同。
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="英文版公司股权架构图" prop="field143">
                  <el-upload ref="field143" :file-list="field143fileList" :action="field143Action" multiple :before-upload="field143BeforeUpload" list-type="picture">
                    <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">
                      英文版公司股权架构图
                      需追溯到持股占25%以上的最终自然人，如A公司持该申请公司股份80%，
                      需追溯到A公司持股占25%以上的自然人；完整清晰的扫描PDF
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>

              <el-col :span="16" class="footer-btn">
                <el-button type="success" @click="isEdit =true">保存提交审核</el-button>
              </el-col>
            </template>
          </el-form>
        </el-row>
      </div>
    </div>
  </d2-container>
</template>
<script>
import d2HeaderFullscreen from "../../../layout/header-aside/components/header-fullscreen";
import d2HeaderLocales from "../../../layout/header-aside/components/header-locales";
import d2HeaderUser from "../../../layout/header-aside/components/header-user";
import { mapState, mapGetters, mapActions } from "vuex";
import mixinSearch from "../../../layout/header-aside/mixins/search";
export default {
  name: "d2-layout-header-aside",
  mixins: [mixinSearch],
  components: {
    d2HeaderFullscreen,
    d2HeaderLocales,
    d2HeaderUser,
  },
  props: [],
  data() {
    return {
      isEdit: true,
      formData: {
        email: undefined,
        emailCode: undefined,
        password: undefined,
        field125: undefined,
        field122: "+86",
        field110: undefined,
        field111: undefined,
        field112: undefined,
        field113: undefined,
        field114: undefined,
        field115: undefined,
        field116: undefined,
        field117: undefined,
        field118: undefined,
        field119: undefined,
        verofycode: "",
        field130: "",
        field131: "",
        field132: "",
        field133: "",
        field134: "",
        field135: "",
        field136: "",
        field137: "",
        field138: "",
        field139: "",
        field140: "",
        field141: "",
        field142: "",
        field143: "",
      },
      rules: {
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur",
          },
        ],
        emailCode: [
          {
            required: true,
            message: "请输入邮箱验证码",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        field125: [
          {
            required: true,
            message: "请输入确认密码",
            trigger: "blur",
          },
        ],
        field122: [
          {
            required: true,
            message: "请输入手机号段",
            trigger: "change",
          },
        ],
        field110: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur",
          },
        ],
        field111: [
          {
            required: true,
            message: "请输入公司名称",
            trigger: "blur",
          },
        ],
        field112: [
          {
            required: true,
            message: "请输入注册证书编号",
            trigger: "blur",
          },
        ],
        field113: [
          {
            required: true,
            message: "请输入公司开户行名称",
            trigger: "blur",
          },
        ],
        field114: [
          {
            required: true,
            message: "请输入开户行账户",
            trigger: "blur",
          },
        ],
        field115: [
          {
            required: true,
            message: "请输入开户行",
            trigger: "blur",
          },
        ],
        field116: [
          {
            required: true,
            message: "请输入开户行行号",
            trigger: "blur",
          },
        ],
        field117: [
          {
            required: true,
            message: "请选择公司注册地址",
            trigger: "blur",
          },
        ],
        field118: [
          {
            required: true,
            message: "请输入法人/股东/董事名称",
            trigger: "blur",
          },
        ],
        field119: [
          {
            required: true,
            message: "请输入座机号码",
            trigger: "blur",
          },
        ],
      },
      verofycodeAction: "https://jsonplaceholder.typicode.com/posts/",
      verofycodefileList: [],
      field130Action: "https://jsonplaceholder.typicode.com/posts/",
      field130fileList: [],
      field131Action: "https://jsonplaceholder.typicode.com/posts/",
      field131fileList: [],
      field132Action: "https://jsonplaceholder.typicode.com/posts/",
      field132fileList: [],
      field133Action: "https://jsonplaceholder.typicode.com/posts/",
      field133fileList: [],
      field134Action: "https://jsonplaceholder.typicode.com/posts/",
      field134fileList: [],
      field135Action: "https://jsonplaceholder.typicode.com/posts/",
      field135fileList: [],
      field136Action: "https://jsonplaceholder.typicode.com/posts/",
      field136fileList: [],
      field137Action: "https://jsonplaceholder.typicode.com/posts/",
      field137fileList: [],
      field138Action: "https://jsonplaceholder.typicode.com/posts/",
      field138fileList: [],
      field139Action: "https://jsonplaceholder.typicode.com/posts/",
      field139fileList: [],
      field140Action: "https://jsonplaceholder.typicode.com/posts/",
      field140fileList: [],
      field141Action: "https://jsonplaceholder.typicode.com/posts/",
      field141fileList: [],
      field142Action: "https://jsonplaceholder.typicode.com/posts/",
      field142fileList: [],
      field143Action: "https://jsonplaceholder.typicode.com/posts/",
      field143fileList: [],
      field122Options: [
        {
          label: "+86",
          value: 1,
        },
        {
          label: "+87",
          value: 2,
        },
      ],
    };
  },
  computed: {
    ...mapState("d2admin", {
      keepAlive: (state) => state.page.keepAlive,
      grayActive: (state) => state.gray.active,
      transitionActive: (state) => state.transition.active,
      asideCollapse: (state) => state.menu.asideCollapse,
      asideTransition: (state) => state.menu.asideTransition,
    }),
    ...mapState("d2admin/user", {
      user: "info",
    }),
    ...mapGetters("d2admin", {
      themeActiveSetting: "theme/activeSetting",
    }),
    /**
     * @description 最外层容器的背景图片样式
     */
    styleLayoutMainGroup() {
      return this.themeActiveSetting.backgroundImage
        ? {
          backgroundImage: `url('${this.$baseUrl}${this.themeActiveSetting.backgroundImage}')`,
        }
        : {};
    },
  },
  watch: {},
  created() { },
  mounted() { },
  methods: {
    ...mapActions("d2admin/menu", ["asideCollapseToggle"]),
    /**
     * 接收点击切换侧边栏的按钮
     */
    handleToggleAside() {
      this.asideCollapseToggle();
    },
    submitForm() {
      this.$router.push({
        path: "/registerStart",
      });

      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    verofycodeBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 10;
      if (!isRightSize) {
        this.$message.error("文件大小超过 10MB");
      }
      return isRightSize;
    },
    field130BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 10;
      if (!isRightSize) {
        this.$message.error("文件大小超过 10MB");
      }
      return isRightSize;
    },
    field131BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 10;
      if (!isRightSize) {
        this.$message.error("文件大小超过 10MB");
      }
      return isRightSize;
    },
    field132BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 10;
      if (!isRightSize) {
        this.$message.error("文件大小超过 10MB");
      }
      return isRightSize;
    },
    field133BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 10;
      if (!isRightSize) {
        this.$message.error("文件大小超过 10MB");
      }
      return isRightSize;
    },
    field134BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 10;
      if (!isRightSize) {
        this.$message.error("文件大小超过 10MB");
      }
      return isRightSize;
    },
    field135BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 10;
      if (!isRightSize) {
        this.$message.error("文件大小超过 10MB");
      }
      return isRightSize;
    },
    field136BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 10;
      if (!isRightSize) {
        this.$message.error("文件大小超过 10MB");
      }
      return isRightSize;
    },
    field137BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 10;
      if (!isRightSize) {
        this.$message.error("文件大小超过 10MB");
      }
      return isRightSize;
    },
    field138BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 10;
      if (!isRightSize) {
        this.$message.error("文件大小超过 10MB");
      }
      return isRightSize;
    },
    field139BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 10;
      if (!isRightSize) {
        this.$message.error("文件大小超过 10MB");
      }
      return isRightSize;
    },
    field140BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 10;
      if (!isRightSize) {
        this.$message.error("文件大小超过 10MB");
      }
      return isRightSize;
    },
    field141BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 10;
      if (!isRightSize) {
        this.$message.error("文件大小超过 10MB");
      }
      return isRightSize;
    },
    field142BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 10;
      if (!isRightSize) {
        this.$message.error("文件大小超过 10MB");
      }
      return isRightSize;
    },
    field143BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 10;
      if (!isRightSize) {
        this.$message.error("文件大小超过 10MB");
      }
      return isRightSize;
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
}
.main {
  width: 60%;
}
.header {
  margin-left: 20px;
  border-bottom: 1px solid #666666;
  padding-bottom: 30px;
  box-sizing: border-box;
  margin-bottom: 3px;
}
.header-info {
  margin: 20px 0px;
  margin-left: 20px;
}
.main-header {
  display: flex;
  align-items: center;
  h5 {
    color: red;
  }
}
.elForm {
  height: 100%;
  margin: 0px auto;
}
.el-upload__tip {
  line-height: 1.2;
}
.title {
  text-align: center;
  margin-top: 50px;
}
.title_sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .wire {
    width: 40%;
    height: 1px;
    background-color: rgb(227, 227, 227);
  }
}
.footer-btn {
  display: flex;
  justify-items: center;
  justify-content: center;
  margin-bottom: 100px;
}
.header-right {
  float: right;
  display: flex;
  justify-content: flex-end;
  padding-right: 100px;
  margin-top: 30px;
}
</style>
<style lang="scss">
// 注册主题
@import "~@/assets/style/theme/register.scss";
</style>